import React, {useEffect, useMemo, useRef} from "react";
import { Badge } from "antd";

import SkProTable, { TableType, IProTableRef } from "vendor/components/pro-table-native";
import { helper } from "vendor/utils/T";
import { permission, EnumAuthKey } from "@/service/permission";
import { useThemeToken } from "@/constants";
import { EnumStatus } from '../../../constants';

import { getDataAction, filterItems } from './proTableDriver';
import { RespDataType } from '../api';
import CreateUser from "./CreateUser";

interface ListProps {
    deptId: number;
}

const List: React.FC<ListProps> = ({deptId}) => {
    const { themeToken } = useThemeToken();
    const proTableRef = useRef<IProTableRef>();
    const columns = useMemo(() => getColumns(), []);

    useEffect(() => {
        if(proTableRef.current){
            proTableRef.current.doFetchList()
        }
    }, [deptId]);

    return (
        <SkProTable
            ref={proTableRef}
            dataAction={getDataAction(proTableRef, deptId)}
            rowKey={"userId"}
            theme={themeToken.proTableToken}
            headerProps={{
                operatorProps: {
                    btnList: [
                        {innerType: "create", authKey:EnumAuthKey.user.addButton},
                        {innerType: "edit", authKey:EnumAuthKey.user.editButton},
                        {innerType: "delete", authKey:EnumAuthKey.user.removeButton}
                    ].filter((item) => permission.can(item.authKey)),
                    createOrEditProps: {
                        modalProps:{
                            width: 600
                        },
                        CreateOrEditContent:CreateUser,
                        getModalTitle: (rowKey) => rowKey ? "编辑用户" : "创建用户",
                    },
                },
                filterProps:{
                    maxWidth: "60%",
                    filterItems
                }
            }}
            contentProps={{
                tableProps: {
                    columns,
                }
            }}
            onError={(msg) => console.error(msg)}
        />
    )
}

export default List;

const getColumns = () => {
    const statusToInfo = helper.convertArrayToObj(EnumStatus);

    const columns: TableType.ColumnsType<RespDataType.UserItem> = [
        {
            title: '用户名称',
            dataIndex: 'userName',
        },
        {
            title: '用户昵称',
            dataIndex: 'nickName',
        },
        {
            title: '组织',
            dataIndex: 'dept',
            render: (value) => value ? value.deptName : "-"
        },
        {
            title: '手机号码',
            dataIndex: 'phonenumber',
            render: (value) => value || "-"
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (value) => {
                const {label, color} = statusToInfo[value];
                return <span>
                    <Badge color={color} />
                    <span style={{color}}>{label}</span>
                </span>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
    ];

    return columns;
}